<template>
	<view class="w100p common_wrap">
		<CommonHeader :title="lang !== 'ru' ? '搜索' : 'Поиск'" color="#262728" @goback="goback" :is-right="false">
		</CommonHeader>
		<!-- <view slot="right">
				<text class="right_title">地区</text>
				<uni-icons type="location" size="30rpx" color="#262728"></uni-icons>
			</view> -->
		<view class="w100p common_search">
			<view class="flex-box w100p search_wrap">
				<uni-icons type="search" size="36rpx" color="#262728"></uni-icons>
				<u-input class="flex-item text" v-model="keyword" type="text" :border="false" :placeholder="$t('搜索')"
					height="auto" @confirm="onSrech"/>
				<view class="tab-container">
					<view :class="['tab-item', !isMerchant && 'active']" @click="changeMerchant(false)">
						<uni-icons type="search" size="30rpx" color="#fff" style="position: relative;top: 0;margin-right: 4rpx;"></uni-icons>
						<text>{{ $t("搜索")}}</text>
					</view>
					<!-- <view class="tab-item factory-tab" @click="goToFactory">
						<uni-icons type="shop-filled" size="30rpx" color="#fff" style="position: relative;top: -2rpx;margin-right: 4rpx;"></uni-icons>
						<text>{{ $t("工厂") }}</text>
						<uni-icons type="right" size="20rpx" color="#fff" style="margin-left: 4rpx;"></uni-icons>
					</view> -->
				</view>
			</view>
		</view>
		<view class="w100p history_wrap" v-if="!!historyData && !!historyData.length">
			<scroll-view :scroll-top="scrollTopH" scroll-y="true" class="w100p scroll-Y" @touchmove.stop>
				<view class="w100p flex-box history_list">
					<view class="ellipsis list_item" v-for="(item, index) in historyData" :key="index" @click="xxsearch(item)">{{
						item }}</view>
				</view>
			</scroll-view>
		</view>
		<view class="w100p tc history_btn">
			<text class="btn" @click="clearHistory" v-if="!!historyData && !!historyData.length">{{ $t("清除历史记录") }}</text>
		</view>
		<view class="w100p pr list_block">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="w100p scroll-Y" refresher-enabled="true"
				@scrolltolower="lower" @refresherrefresh="fresh" refresher-background="transparent"
				:refresher-triggered="isRefresher" @refresherrestore="store" @touchmove.stop>
				<template v-if="!!dataList && !!dataList.length">
					<view class="w100p flex-box list_wrap" v-if="!isChange">
						<view class="list_item" v-for="subItem in dataList" :key="subItem.id"
							@click="goDetails(1, subItem.id, subItem.yj_id, subItem)">
							<view class="w100p img_wrap">
								<image class="img" :src="subItem[plang('pic')] " mode="aspectFill"></image>
							</view>
							<view class="w100p flex-item con_wrap">
								<view class="w100p list_name">
									{{ subItem[plang('name')] || "" }}
								</view>
								<view class="w100p flex-box price_wrap">
									<text class="flex-none unit">{{ subItem.currency || '￥'  }}</text>
									<text class="flex-item ellipsis num">{{ subItem.sell_price || 0 }}</text>
									<view class="flex-none look">
										<uni-icons type="eye" size="28rpx" color="#606366"></uni-icons>
										<text> {{ subItem.viewnum > 100 ? "100+" : subItem.viewnum }}</text>
									</view>
								</view>
								<view class="w100p flex-box shop_wrap" v-if="subItem.merchant">
									<view class="flex-none shop_img">
										<image class="img" :src="subItem.merchant.logo || '/static/default.png'" mode="aspectFill"></image>
									</view>
									<view class="flex-item name_wrap">
										<view class="pr shop_name ellipsis">
											{{ subItem.merchant[plang('name')] || "" }}
											<image class="pa img" :src="getVipImg(subItem.merchant.isvip)" mode="widthFix"></image>
										</view>
									</view>
									<view class="flex-none country_img">
								
										<image  class="img" :src="createNationalCircle(subItem.merchant.country).imgurl" mode="aspectFill"></image>
									</view>
								</view>
								<view class="w100p flex-box shop_wrap" v-else>
									<view class="flex-none shop_img">
										<image class="img" src="@/static/gluz.png" mode="aspectFill"></image>
									</view>
									<view class="flex-item ellipsis pr shop_name">
										GLUZ
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="w100p merchant_wrap" v-else>
						<view class="w100p flex-column list_item" v-for="subItem in dataList" :key="subItem.id"
							:style="{ 'backgroundImage': `url(${subItem.bg_img || commonImg})`, marginTop: '20rpx' }"
							@click="goDetails(2, subItem.id, '', subItem)">
							<!-- <view class="w100p flex-none publicize_text"></view> -->
							<view class="w100p flex-none inline-flex merchant_detail">
								<view class="pr merchant_header">
									<view class="header_img">
										<image class="img" :src="subItem.logo || '/static/default.png'" mode="aspectFill"></image>
									</view>
									<view class="header_icon">
										<image class="img" :src="createNational(subItem.country).imgurl" mode="aspectFill" style="border-radius: 4rpx;">
										</image>
									</view>
								</view>
								<view class="flex-item oh name_wrap">
									<view class="pr ellipsis shop_name">
										{{ subItem[plang('name')] || "" }}
										<image class="pa img" :src="getVipImg(subItem.isvip)" mode="widthFix"></image>
									</view>
									<view class="w100p star_wrap">
										<u-rate :count="5" :current="subItem.comment_score" inactive-icon="star-fill"
											inactive-color="#DADADA" active-color="#FFE05F" :disabled="true"></u-rate>
									</view>
								</view>
								<view class="flex-none follow_wrap" @click.stop="collectMerchant(true, subItem.id)"
									v-if="!subItem.is_guanzhu">
									+ {{ lang !== 'ru' ? "关注店铺" : "Подписка" }}
								</view>
								<view class="flex-none follow_wrap" @click.stop="collectMerchant(false, subItem.id)" v-else>
									{{ $t("已关注") }}
								</view>
							</view>

							<view class="ohter-consten">
								<view class="addressxx">
									{{ $t('地址') }}：{{ subItem[plang('address')] }}
								</view>
								<view class="addressxx">
									{{ $t('主营') }}：{{ subItem[plang('desc')] }}
								</view>
								<view class="xxx">
									<scroll-view :scroll-x="true" v-if="subItem.prolist.length" class="xxxxxx">
										<view class="goods-wraps">

											<view class="good" v-for="(item, index) in subItem.prolist" :key="index">
												<image :src="item.pic" mode="aspectFill" @click="goDetails(2, item.id, '', item)"/>
											</view>
										</view>
									</scroll-view>
								</view>

							</view>

						</view>
					</view>
				</template>
				<view v-else class="w100p pr empty_wrap">
					<view class="empty">
						<image class="empty_img" src="@/static/search.png" mode="widthFix"></image>
						<text class="empty_text">{{ lang !== 'ru' ? "暂无搜索信息" : "Пока нет информации о поиске" }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<CommonLoading :show="isLoading"></CommonLoading>

	</view>
</template>

<script>
import CommonHeader from "../components/common-header.vue";
import img from '@/static/mt-li/pic.png';
import vipImg1 from '@/static/detail/vip_1.png';
import vipImg2 from '@/static/detail/vip_2.png';
import vipImg3 from '@/static/detail/vip_3.png';
import vipImg4 from '@/static/detail/vip_4.png';
import { createNational,memberLevel,createNationalCircle } from '@/assets/public';

import {
	mapState
} from 'vuex';
export default {
	components: {
		CommonHeader
	},
	data() {
		return {
			dataList: [],
			current: 0,
			isLoading: false,
			scrollTop: 0,
			scrollTopH: 0,
			page: 1,
			limit: 12,
			isData: false,
			shopId: "",
			isRefresher: false,
			keyword: "",
			isMerchant: false,
			isChange: false,
			historyData: [],
			commonImg: img,
			view: 1,
		}
	},
	computed: {
		// 使用mapState生成计算属性
		...mapState({
			lang: state => state.commonData.lang,
		})
	},
	watch: {
		lang(newValue, oldValue) {
			console.log('lang changed:', newValue);
		},
	},

	created() {
		let res = uni.getStorageSync('historyRecord') || [];
		this.historyData = [...res];
	},
	onShow() {
	},
	methods: {
		xxsearch(item){
			this.page = 1;
			this.isMerchant = false;
			this.isChange = false;
			this.search(item)
		},
		createNationalCircle,
		createNational,
		memberLevel,
		goToFactory(){
			uni.navigateTo({
				url: '/pages/highQualityShippers/index?isShop=1',
				webview: 'zWebView',
			})
		},
		// 关注
		async collectMerchant(val, id) {
			try {
				const res = await this.$u.api.shopping.addfavorite({
					bid: id,
					is_guanzhu: 1,
				});
				uni.showToast({
					title: res[this.plang('msg')],
					icon: 'none',
					duration: 2000
				});
				this.getData()
			} catch (e) { }
		},
		getVipImg(val) {
			switch (val) {
				case 0:
					return vipImg1;
				case 1:
					return vipImg2;
				case 2:
					return vipImg3;
				case 3:
					return vipImg4;
				default:
					break;
			}
		},
		goback() {
			uni.navigateBack()
		},
		// 搜索
		search(val) {
			if (!val) {
				uni.showToast({
					title: this.$t('关键词不能为空'),
					icon: 'none',
				})
				return;
			};
			this.keyword = val;
			this.dataList = [];
			let add = this.historyData.some((item, index) => {
				if (item === val) {
					this.historyData.splice(index, 1);
					return true;
				}
				return false;
			})
			this.historyData.unshift(val);
			if (!add) {
				if (this.historyData.length < 10) {
					uni.setStorageSync('historyRecord', this.historyData);
				} else {
					let arr = [];
					this.historyData.map((item, index) => {
						if (index < 10) {
							arr.push(item);
						}
					})
					uni.setStorageSync('historyRecord', arr);
				}
			}

			this.isChange = this.isMerchant;
			this.getData();
		},
		// 切换搜索项
		changeMerchant(bole) {
			this.page = 1;
			this.isMerchant = bole;
			this.isChange = bole;
			this.search(this.keyword);
		},
		onSrech() {
			this.page = 1;
			this.search(this.keyword);
		},
		// 清除历史记录
		clearHistory() {
			this.historyData = [];
			uni.removeStorageSync('historyRecord');
		},
		// 触底加载
		lower() {
			if (this.isData) return;
			this.page++;
			this.getData();
		},
		// 下拉刷新触发
		fresh() {
			this.page = 1;
			this.isRefresher = true;
			this.isData = false;
			this.getData();
		},
		// 下拉刷新复位
		store() {
			this.isRefresher = false;
		},
		// getprolist 获取列表
		async getData() {
			if (this.isLoading) return;
			this.isLoading = true;
			// uni.showLoading({
			// 	title:'loading...',
			// })
			try {
				let api = "getblist";
				if (!this.isMerchant) {
					api = "getprolist";
				}
				const {
					data
				} = await this.$u.api.shopping[api]({
					cid: "",
					pagenum: this.page,
					pagesize: 24,
					keyword: this.keyword,
					field: "",
					order: "",
					lang: this.lang,
					field: this.field,
					isZero: this.lang == 'ru' ? 2 : 0,
				});
				// 首页置空数据
				if (this.page === 1) {
					this.dataList = [];
				}
				// 每页最多12条数据，分两组
				if (!!data?.length) {
					// 每6条数据加一组广告
					let arr = [];
					data.map(item => {
						arr.push(item);
					})

					this.dataList.push(...arr);

					// 数据不足12条，禁止上拉加载
					if (this.lang == 'zh') {
						if (data.length < 10) {
							this.isData = true;
						}
					} else {
						if (data.length < 6) {
							this.isData = true;
						}
					}

				} else {
					this.isData = true;
				}
				this.$nextTick(()=>{
					this.isLoading = false;
				})
				this.isRefresher = false;
					uni.hideLoading({})
			} catch (e) {
				this.isLoading = false;
				this.isRefresher = false;
				uni.hideLoading({})
			}
		},
		// 跳转详情页
		async goDetails(val, id, cid, subItem) {
			if (subItem.offerId){
				if (!id) {
						let res = await this.$u.api.shopping.addproduct({
							offerId: subItem.offerId,
							name: subItem.subject,
						});
						id = res.data.aid;
				}
				uni.navigateTo({
					url: '/pages/details/shopDetail1688?id=' + id + '&offerId=' + (subItem.offerId || '') + '&offer_price=' + (subItem.sell_price || '')
				})
				return;
			}
			switch (val) {
				case 3:
						if (subItem.is_qiche == 1) {
							uni.navigateTo({
								url: '/pages/details/carDetail?id=' + id
							})
						} else {
							uni.navigateTo({
								url: '/pages/details/shopDetail1688?id=' + id + '&offerId=' + (subItem.offerId || '') + '&offer_price=' + (subItem.sell_price || '')
							})
						}
					

					break;
				case 1:
					if (cid == 'xxxxxxxxxxxxx') {
						let res = await this.$u.api.shopping.getProduct({
							id: id,
						});
						if (res.code == 0) {
							uni.showToast({
								title: res[this.plang('msg')],
								icon: 'none',
							})
							return;
						}
						uni.navigateTo({
							url: '/pages/details/carDetail?id=' + id
						})
					} else {
						// 1688商品
						if (subItem.offerId) {
							// await this.$u.api.shopping.products_del({
							// 	offerId: subItem.offerId,
							// });
							// 跳转
							uni.navigateTo({
								url: '/pages/details/shopDetail1688?id=' + id + '&offerId=' + (subItem.offerId || '') + '&offer_price=' + (subItem.sell_price || '')
							})
						} else {
							await this.$u.api.shopping.getProduct({
								id: id,
							});

							uni.navigateTo({
								url: '/pages/details/shopDetail?id=' + id
							})
						}

					}
					break;
				case 2:
					uni.navigateTo({
						url: '/pages/details/merchantDetail?bid=' + id
					})
					break;
				default:
					break;
			}
		},
	}
}
</script>

<style scoped lang="less">
.right_title {
	font-size: 26rpx;
	line-height: 1.2;
	color: #262728;
	margin-right: 10rpx;
}

.common_search {
	padding: 20rpx 24rpx 0;
	margin-bottom: 30rpx;
	flex: none;

	.search_wrap {
		background-color: #fff;
		padding: 6rpx 4rpx 6rpx 24rpx;
		height: 76rpx;
		border-radius: 76rpx;
		display: flex;
		align-items: center;
		justify-content: center;


		.text {
			padding: 0 8rpx !important;
			font-size: 24rpx;
			line-height: 1.2;
			color: #606366;
		}

		.tab-container {
			display: flex;
			align-items: center;
			height: 64rpx;
			
			.tab-item {
				color: #fff;
				font-size: 24rpx;
				line-height: 1.2;
				height: 64rpx;
				border-radius: 64rpx;
				background: #6DA4CD;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				padding: 0 16rpx;
				min-width: 100rpx;
				margin-right: 8rpx;
				transition: all 0.3s;
				
				&:last-child {
					margin-right: 0;
				}
				
				uni-icons {
					margin-right: 4rpx;
				}
				
				&.active {
					background: #0097FF;
					box-shadow: 0 2rpx 8rpx rgba(0, 151, 255, 0.3);
					transform: translateY(-2rpx);
				}
				
				&.factory-tab {
					background: linear-gradient(to right, #FF8035, #FF6A00);
					box-shadow: 0 2rpx 8rpx rgba(255, 106, 0, 0.3);
					padding-right: 20rpx;
					border: 1px solid rgba(255, 255, 255, 0.3);
					position: relative;
					overflow: hidden;
					transition: all 0.2s ease;
					
					&:active {
						transform: scale(0.96);
						opacity: 0.9;
					}
					
					&::after {
						content: '';
						position: absolute;
						top: 0;
						right: 0;
						bottom: 0;
						width: 16rpx;
						background: rgba(255, 255, 255, 0.1);
					}
				}
			}
		}
	}
}

.history_wrap {
	padding: 0 24rpx;
	flex: none;
	margin-bottom: 8rpx;
	max-height: 220rpx;

	.scroll-Y {
		height: 100%;
		overflow: hidden;

		.history_list {
			align-items: center;
			justify-content: start;
			flex-wrap: wrap;

			.list_item {
				font-size: 24rpx;
				height: 46rpx;
				line-height: 46rpx;
				background: #E2F3FF;
				border-radius: 46rpx;
				padding: 0 32rpx;
				margin-right: 16rpx;
				margin-bottom: 16rpx;
				max-width: 100%;
				min-width: 150rpx;
				text-align: center;
			}
		}
	}
}

.history_btn {
	margin-bottom: 30rpx;

	.btn {
		font-size: 24rpx;
		line-height: 1.2;
		color: #606366;
		border-bottom: 1px solid #606366;
	}
}

.list_block {
	padding: 0 24rpx;
	flex: 1;
	overflow: hidden;

	.scroll-Y {
		height: 100%;
		overflow: hidden;
	}

	.list_wrap {
		align-items: flex-start;
		justify-content: space-between;
		flex-wrap: wrap;

		.list_item {
			margin-bottom: 24rpx;
			width: 342rpx;
			height: 486rpx;
			overflow: hidden;
			border-radius: 24rpx;
			background-color: #fff;
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.08);

			.img_wrap {
				height: 254rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.con_wrap {
				padding: 16rpx 16rpx 8rpx;

				.list_name {
					height: 80rpx;
					font-size: 28rpx;
					line-height: 40rpx;
					color: #262728;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					line-clamp: 2;
					-webkit-line-clamp: 2;
					/* 定义显示的行数 */
					overflow: hidden;
					text-overflow: ellipsis;
					margin-bottom: 10rpx;
				}

				.price_wrap {
					align-items: flex-end;
					padding-bottom: 10rpx;
					margin-bottom: 10rpx;
					border-bottom: 1px dashed #DBDBDB;

					.unit {
						font-size: 22rpx;
						line-height: 30rpx;
						color: #FF6A00;
						font-weight: 700;
					}

					.num {
						color: #FF6A00;
						font-size: 50rpx;
						font-weight: 700;
						line-height: 52rpx;
						padding-right: 10rpx;
					}

					.look {
						font-size: 20rpx;
						line-height: 28rpx;
						font-weight: 400;
						color: #606366;
					}
				}

				.shop_wrap {
					justify-content: space-between;

					.shop_img,
					.country_img {
						width: 44rpx;
						height: 44rpx;
						border-radius: 100%;
						overflow: hidden;
						margin-right: 10rpx;

						.img {
							width: 100%;
							height: 100%;
						}
					}

					.country_img {
						margin-right: 0;
					}

					.name_wrap {
						display: inline-flex;
						align-items: center;
					}

					.shop_name {
						font-size: 24rpx;
						line-height: 1.2;
						color: #262728;
						padding-right: 28rpx;
						margin-right: 10rpx;
						max-width: 198rpx;
						display: inline-block;

						.img {
							right: 0;
							top: 0;
							bottom: 0;
							margin: auto;
							z-index: 1;
							width: 24rpx;
						}
					}
				}
			}
		}
	}

	.merchant_wrap {
		.list_item {
			height: 328rpx;
			padding: 30rpx 24rpx;
			border-radius: 24rpx;
			overflow: hidden;
			// justify-content: space-between;
			background-repeat: no-repeat;
			background-position: left top;
			background-size: cover;
			position: relative;
			align-items: flex-start;

			&:before {
				position: absolute;
				content: '';
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				background: rgba(0, 0, 0, 0.15);
				z-index: 1;
			}

			.publicize_text {
				font-size: 44rpx;
				line-height: 1.2;
				font-weight: 700;
				color: #fff;
				z-index: 2;
			}

			.merchant_detail {
				align-items: center;
				justify-content: center;
				z-index: 2;

				.merchant_header {
					width: 90rpx;
					height: 90rpx;
					text-align: center;
					margin-right: 10rpx;

					.header_img {
						width: 72rpx;
						height: 72rpx;
						border: 3rpx solid #fff;
						border-radius: 14rpx;
						display: inline-block;
						transform: rotateZ(-15deg);

						.img {
							width: 100%;
							height: 100%;
						}
					}

					.header_icon {
						position: absolute;
						left: 14rpx;
						bottom: 0;
						z-index: 1;
						width: 65rpx;
						height: 28rpx;
						border: 1px solid #fff;
						border-radius: 4rpx;
						display: inline-flex;

						.img {
							width: 100%;
							height: 100%;
						}
					}
				}

				.name_wrap {
					margin-right: 10rpx;

					.shop_name {
						display: inline-flex;
						align-items: center;
						font-size: 26rpx;
						line-height: 1.2;
						color: #fff;
						padding-right: 30rpx;
						max-width: 100%;
						display: inline-block;

						.img {
							right: 0;
							top: 0;
							bottom: 0;
							margin: auto;
							z-index: 1;
							width: 24rpx;
						}
					}

					::v-deep .star_wrap {
						.u-star-wrap {
							transform: rotateZ(8deg);
						}
					}
				}

				.follow_wrap {
					min-width: 150rpx;
					height: 56rpx;
					line-height: 56rpx;
					padding: 0 20rpx;
					border-radius: 56rpx;
					background: linear-gradient(to right, #FFD7BA, #FF6A00);
					color: #fff;
					font-size: 22rpx;
					text-align: center;
				}
			}
		}
	}

}

.empty_wrap {
	height: 100%;
	text-align: center;

	.empty {
		padding-top: 80rpx;

		.empty_img {
			width: 400rpx;
		}

		.empty_text {
			width: 100%;
			display: inline-block;
			text-align: center;
			font-size: 24rpx;
			line-height: 1.2;
			color: #606366;
		}
	}
}

.ohter-consten {
	text-align: left;
	position: relative;
	z-index: 1;
	width: 100%;

	.addressxx {
		color: #fff;
		font-size: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.xxx {
		margin-top: 10rpx;
		width: 100%;
		.xxxxxx {
			width: 100%;

			.goods-wraps {
				display: flex;
				align-items: center;

				.good {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
					overflow: hidden;
					margin-right: 10rpx;
					flex-shrink: 0;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

}
</style>